.foxui-tabs {
    background-color: $--color-white;

    &.foxui-position-right {
        .foxui-tabs-header {
            justify-content: flex-end;
        }

        &.foxui-type-panel {
            .foxui-tabs-item {
                &.is-active {
                    border-left: $--border-base;

                    &:not(:last-child) {
                        border-right: $--border-base;
                    }
                }
            }
        }
    }

    &:not(.foxui-position-right) {
        &.foxui-type-panel {
            .foxui-tabs-item {
                &.is-active {
                    border-right: $--border-base;

                    &:not(:first-child) {
                        border-left: $--border-base;
                    }
                }
            }
        }
    }

    &.foxui-type-card {
        .foxui-tabs-header {
            padding: 0;

            .foxui-tabs-item {
                height: 100%;
                display: flex;
                align-items: center;
                border-top: $--border-base;
                border-left: $--border-base;

                &:last-child {
                    border-right: $--border-base;
                    border-top-right-radius: $--border-radius-base;
                }

                &:first-child {
                    border-top-left-radius: $--border-radius-base;
                }

                &.is-active {
                    position: relative;

                    &::after {
                        content: '';
                        display: inline-block;
                        height: 2px;
                        width: 100%;
                        position: absolute;
                        left: 0;
                        bottom: -2px;
                        background-color: $--color-white;
                    }
                }
            }
        }
    }

    &.foxui-type-panel {
        box-shadow: $--box-shadow-base;
        border: $--border-base;

        .foxui-tabs-header {
            padding: 0;
            background-color: $--background-color-base;

            .foxui-tabs-item {
                height: 100%;
                display: flex;
                align-items: center;

                &.is-active {
                    background-color: $--color-white;
                    position: relative;
                    transition: $--background-color-transition-base;

                    &::after {
                        content: '';
                        display: inline-block;
                        height: 2px;
                        width: 100%;
                        position: absolute;
                        left: 0;
                        bottom: -2px;
                        background-color: $--color-white;
                    }
                }
            }
        }
    }
}

.foxui-tabs-header {
    padding: 0 $--padding-medium;
    height: $--tabs-header-height;
    display: flex;
    align-items: center;
    border-bottom: $--border-base;
    position: relative;
}

.foxui-tabs-item {
    padding: 0 $--padding-large;
    transition: $--color-transition-base;
    cursor: pointer;
    font-size: $--font-size-medium;

    &:hover {
        color: $--color-primary;
    }

    &.is-active {
        color: $--color-primary;
    }
}

.foxui-tabs__active-bar {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: $--color-primary;
    width: 50px;
    transition: $--md-fade-transition;
}

.foxui-tabs-content {
    padding: $--padding-large;
}
